<template>
    <div id="apparea" class="userprofile anipage">
        <div class="section_info">
            <div class="flexbox section_item">
                <div class="flex_item">
                    <div class="item_title">
                        <vname :name="'账号'"></vname>
                    </div>
                </div>
                <div class="flex_item">
                    <div class="control rightpadding">
                        <span class="tipwords">{{account.username||'保密'}}</span>
                    </div>
                </div>
            </div>
            <div class="flexbox section_item">
                <div class="flex_item">
                    <div class="item_title">
                        昵称
                    </div>
                </div>
                <div class="flex_item">
                    <div class="control rightpadding">
                        <span class="tipwords">{{account.nameOfEnglish||'保密'}}</span>
                    </div>
                </div>
            </div>
            <div class="flexbox section_item">
                <div class="flex_item">
                    <div class="item_title">
                        所处城市
                    </div>
                </div>
                <div class="flex_item">
                    <div class="control rightpadding">
                        <span class="tipwords">{{account.sFrom||'保密'}}</span>
                    </div>
                </div>
            </div>
            <div class="flexbox section_item">
                <div class="flex_item">
                    <div class="item_title">
                        生日
                    </div>
                </div>
                <div class="flex_item">
                    <div class="control rightpadding">
                        <span class="tipwords">{{getBirthday(account.brithday)}}</span>
                    </div>
                </div>
            </div>
            <div class="flexbox section_item">
                <div class="flex_item">
                    <div class="item_title">
                        联系电话
                    </div>
                </div>
                <div class="flex_item">
                    <div class="control rightpadding">
                        <span class="tipwords">{{account.mobile||'保密'}}</span>
                    </div>
                </div>
            </div>
            <div class="flexbox section_item">
                <div class="flex_item">
                    <div class="item_title">
                        工种
                    </div>
                </div>
                <div class="flex_item">
                    <div class="control rightpadding">
                        <span class="tipwords">{{getStypeName(account.sType)}}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import pageheader from "@/components/public/pageheader.vue";
import animationminx from "@/mixins/animationminx.js";
import { mapState } from "vuex";
import vname from "./vconsole.vue";
export default {
    name: "profile",
    components: {
        pageheader,
		vname
    },
    mixins: [animationminx],
    data() {
        return {
            
        }
    },
    computed:{
        ...mapState({
            account: state=> state.user.account,
        })
    },
    methods:{
        getStypeName:function(type){
            if(~~type==1)
            {
                return '员工';
            }else if(~~type==2)
            {
                return "客户";
            }else if(~~type==3){
                return "司机";
            }else{
                return "保密";
            }
        },
		getBirthday:function(data){
			if(data)
			{
				return data.substring(0,10);
			}else{
				return "保密";
			}
		}
    },
    mounted:function(){
        console.log(this.account);
    }
};
</script>

<style lang="less">
.userprofile{
    width: 100%;
    height: auto;
    .section_info{
      width: 94%;
      height: auto;
      margin-left: 3%;
      margin-top: .24rem;
      border-radius: .12rem;
      background-color:#fff;
      display: block;
      .section_item{
        width: 98%;
        height: 1.3rem;
        margin-left: 1%;
        overflow:hidden;
        box-sizing: border-box;
        border-bottom: 1px solid #eee;
        .avatar{
          width:.9rem;
          height:.9rem;
          margin:.2rem .2rem;
          img{
            width: 100%;
            height: 100%;
            border-radius: .5rem;
          }
        }
        .item_title{
          width: 100%;
          height: 100%;
          color: #666;
          overflow:hidden;
          line-height: 1.3rem;
          text-indent: .3rem;
          font-size: .36rem;
          text-overflow: ellipsis;
          white-space: nowrap;
          text-align: left;
        }
        .control{
          text-align: right;
          width: 100%;
          height: 1.3rem;
          line-height: 1.3rem;
          box-sizing: border-box;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          font-size: 0px;
          input{
            border: none;
            color: #666;
            width: 80%;
            height: 1.3rem;
            font-size: .26rem;
            outline: none;
            text-align: right;
          }
          .tipwords{
            vertical-align: middle;
            color: rgba(78, 78, 78, 0.61);
            margin-left:.1rem;
            font-size: .36rem;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          .vanicon{
              vertical-align: middle;
              display: inline-block;
              margin-left: .1rem;
          }
        }
      }
      .specialitem{
        height: 2.2rem;
        overflow: hidden;
        .control{
          width: 100%;
          height: 2.2rem;
          overflow: hidden;
          line-height: .5rem;
          text-align: right;
          padding-top: .2rem;
          padding-bottom: .2rem;
          display:table-cell;
          vertical-align:middle;
          min-width: 6rem;
        }
      }
      .rightpadding{
        padding-right:.3rem;
      }
    }
    .fileImage{
        opacity: 0;
        width: 0px;
        height: 0px;
        display: inline-block;
    }
} 
</style>
